import React, { ReactElement, useContext } from 'react';
import { View, Text, Image } from 'react-native';

import styles from './style';
import { Store } from '../../reducer';
import Button from '../../../../../../components/Button';
import {
  avatar,
  edit,
  female,
  gold,
  male
} from '../../../../../../constant/resource';
import { onPressPersonalInfo } from '../../actions';
import { GENDER } from '../../constant';

export default (): ReactElement => {
  const { state } = useContext(Store);
  const { data } = state;
  const { mobilePhone, headPortraitURL, nickName, gender, goldCoinNum } = data;

  return (
    <View style={styles.container}>
      <View style={styles.content}>
        <View style={styles.headContent}>
          <Image
            source={headPortraitURL ? { uri: headPortraitURL } : avatar}
            style={styles.head}
          />
          {gender ? (
            <Image
              source={gender === GENDER.Male ? male : female}
              style={styles.sex}
            />
          ) : null}
        </View>
        <View style={styles.info}>
          <View style={styles.nameContent}>
            <Text style={styles.name} numberOfLines={1}>
              {nickName}
            </Text>
            <Text style={styles.phone}>{mobilePhone}</Text>
            <Button style={styles.edit} onPress={onPressPersonalInfo}>
              <Image source={edit} style={styles.editIcon} />
            </Button>
          </View>
          <View style={styles.goldContent}>
            <Image source={gold} style={styles.goldIcon} />
            <Text style={styles.goldDesc}>金币 {goldCoinNum}</Text>
          </View>
        </View>
      </View>
    </View>
  );
};
